<template>
    <div>
        <!-- 未登录页面 -->
        <div v-if="token == null">
            <img class="logo" src="../assets/logo.png" alt="">
            <div class="box">
                <van-tabs v-model="active">
                    <van-tab title="密码登录">
                        <van-field v-model="email" placeholder="邮箱" clearable />
                        <form>
                            <van-field v-model="password" placeholder="请输入密码" type="password" />
                        </form>
                        <div style="display: flex;">
                            <van-button @click="login(email, password)" round style="width: 80%;margin: 20px 10%;"
                                type="info">登录</van-button>
                        </div>
                    </van-tab>
                    <van-tab title="注册">
                        <van-field v-model="email" label="邮箱" label-width="60" placeholder="注册邮箱" clearable />
                        <van-field v-model="userName" label="用户昵称" label-width="60" placeholder="用户昵称" />
                        <form>
                            <van-field v-model="password" label="用户密码" label-width="60" placeholder="用户密码" clearable
                                type="password" />
                        </form>
                        <van-field v-model="school" label="所属院校" label-width="60" placeholder="所属院校" />
                        <van-field style="padding: 6px;" v-model="code" center clearable placeholder="请输入邮箱验证码">
                            <template #button>
                                <van-button :disabled="btn" @click="getCode(email)" size="small" type="primary">{{ sms
                                }}</van-button>
                            </template>
                        </van-field>
                        <van-button @click="logon(email, userName, password, school, code)" round
                            style="width: 80%;margin: 20px 10%;">注册</van-button>
                    </van-tab>
                </van-tabs>
            </div>
        </div>
        <!-- 登陆成功页面 -->
        <div v-if="token != null">
            <div class="user">
                <img class="userImg" @click="show" :src="userInfo.buddha" alt="">
                <div style="display: flex;flex-direction: column;">
                    <div style="display: flex;">
                        <div class="userName">{{ userInfo.username }}</div>
                        <div style="margin-top: 12px;" v-if="userInfo.sex === 0">男</div>
                        <div style="margin-top: 12px;" v-if="userInfo.sex === 1">女</div>
                    </div>
                    <div class="school">{{ userInfo.school }}</div>
                </div>
            </div>
            <div class="user-btn">
                <van-button @click="goMore" type="default" style="margin: 15px 0;">修改资料</van-button>
                <van-button @click="goMysend" type="default">我的发布</van-button>
                <van-button @click="gochangePassword" type="default">修改密码</van-button>
                <van-button @click="logout" style="color: red;" type="default">退出登录</van-button>
            </div>
        </div>
    </div>
</template>
  
<script>
import { Notify, Toast, ImagePreview } from 'vant';
import { loginAPI, logonAPI, emailCodeAPI, getUserAPI } from '../api/API'
export default {
    name: 'Login',
    data() {
        return {
            active: 0,
            userName: "",
            password: "",
            email: "",
            school: "",
            // 邮箱验证码
            code: "",
            token: "",
            userID: "",
            userInfo: "",
            sms: '获取验证码',
            btn: false
        }
    },
    methods: {
        // 登录
        login(email, password) {
            loginAPI(email, password).then((res) => {
                console.log(res);
                if (res.data.code == 200) {
                    Toast.success('登录成功');
                    // 本地存储token
                    localStorage.setItem('token', res.data.date.token)
                    this.token = res.data.date.token
                    // 本地存储用户ID
                    localStorage.setItem('userID', res.data.date.user[0].uid)
                    this.userID = res.data.date.user[0].uid
                    // 获取用户信息
                    getUserAPI(localStorage.getItem('userID')).then((res) => {
                        // location.reload();
                        console.log(res.data.date[0]);
                        this.userInfo = res.data.date[0]
                    })
                } else {
                    Notify({ type: 'warning', message: res.data.msg });
                }
            })
        },
        // 获取验证码
        getCode(email) {
            emailCodeAPI(email).then((res) => {
                console.log(res);
                if (res.data.code == 1004) {
                    Notify({ type: 'warning', message: res.data.msg });
                } else if (res.data.code == 1013) {
                    Notify({ type: 'warning', message: res.data.msg });
                } else if (res.data.code == 1014) {
                    Notify({ type: 'warning', message: res.data.msg });
                } else if (res.data.code == 1015) {
                    Notify({ type: 'warning', message: res.data.msg });
                } else if (res.data.code == 200) {
                    Notify({ type: 'success', message: res.data.msg });
                    this.btn = true
                    let n = 60
                    const timer = setInterval(() => {
                        this.sms = '请' + n + '秒后重式'
                        n--;
                        if (n <= -2) {
                            clearInterval(timer)
                            this.sms = '获取验证码'
                            this.btn = false
                        }
                    }, 1000);
                }
            })
        },
        // 注册
        logon(email, userName, password, school, code) {
            logonAPI(email, userName, password, school, code).then((res) => {
                console.log(res);
                if (res.data.code == null) {
                    Notify({ type: 'warning', message: res.data });
                } else if (res.data.code == 1004) {
                    Notify({ type: 'warning', message: res.data.msg });
                } else if (res.data.code == 204) {
                    Notify({ type: 'warning', message: res.data.msg });
                } else if (res.data.code == 200) {
                    Notify({ type: 'success', message: res.data.msg });
                    this.active = 0
                }
            })
        },
        // 跳转至More
        goMore() {
            this.$router.push('/more')
        },
        // 跳转至我的发布
        goMysend() {
            this.$router.push('/mysend')
        },
        // 退出登录
        logout() {
            Toast.success('退出成功');
            localStorage.removeItem('token')
            localStorage.removeItem('userID')
            // this.$router.push('/home')
            location.reload()
        },
        // 修改密码
        gochangePassword() {
            this.$router.push('/change')
        },
        // 预览图片
        show() {
            ImagePreview({
                images: [this.userInfo.buddha],
                showIndex: false
            });
        }
    },
    mounted() {
        this.token = localStorage.getItem('token')
        // console.log(this.token);
        // 获取用户信息
        getUserAPI(localStorage.getItem('userID')).then((res) => {
            console.log(res.data.date[0]);
            this.userInfo = res.data.date[0]
        })
    }
}
</script>
  
<style scoped>
.logo {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -40%);
    width: 80px;
}

body {
    background-color: #eee;
}

.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    width: 80%;
    background-color: #fff;
    border-radius: 15px;
}

.van-field {
    margin: 20px auto;
    width: 90%;
    background-color: #fff;
    border-radius: 15px;
}

.user {
    border-radius: 0 0 10px 10px;
    display: flex;
    align-items: center;
    padding: 20px 10px;
    background-color: aquamarine;
}

.userImg {
    width: 80px;
    height: 80px;
    border-radius: 100px;
}

.userName {
    width: 130px;
    margin-left: 10px;
    margin: 10px 15px;
    font-size: 20px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}

.user-btn .van-button {
    width: 100%;
}

.school {
    width: 160px;
    margin-left: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>